<template>
  <div class="index-page">
    <div class="flex flex-row flex-justify-between" style="flex:1;">
      <squareIndex v-for="(item,index) in previewData" :squareData="item" :key="index"/>
    </div>
    <div class="echart-line">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="本周收益" name="first">
          <ve-line :data="chartData" :lazy='true' :settings="chartSettings" id='week'></ve-line>
        </el-tab-pane>
        <el-tab-pane label="本月收益" :lazy='true' name="second">
          <ve-line :data="chartData" :settings="chartSettings" id='month'></ve-line>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import squareIndex from "@/components/squareIndex/index";
// require('echarts/lib/chart/line');
export default {
  name: "index",
  props: {},
  data() {
    this.chartSettings = {
      xAxisType: "category",
      yAxisType: "value"
    };
    return {
      activeName: "first",
      previewData: [
        {
          text: "888/22",
          explanation: "设备在线/离线（台）",
          bg:
            "background: url('../../../src/assets/images/home-top-item-icon1.png') 85% center no-repeat,linear-gradient(to right, rgb(255, 114, 37), rgb(255, 180, 100));"
        },
        {
          text: "888.00",
          explanation: "今日收益（元）",
          bg:
            "background: url('../../../src/assets/images/home-top-item-icon2.png') 85% center no-repeat,linear-gradient(to right, rgb(200, 156, 87), rgb(228, 198, 146));"
        },
        {
          text: "10",
          explanation: "客户数（家）",
          bg:
            "background: url('../../../src/assets/images/home-top-item-icon3.png') 85% center no-repeat,linear-gradient(to right, rgb(94, 168, 155), rgb(123, 221, 205));"
        },
        {
          text: "30%",
          explanation: "机器新增率（月）",
          bg:
            "background: url('../../../src/assets/images/home-top-item-icon4.png') 85% center no-repeat,linear-gradient(to right, rgb(145, 161, 99), rgb(201, 215, 163));"
        }
      ],
      chartData: {
        columns: ["日期", "收益", "设备"],
        rows: [
          { 日期: "0:00", 收益: 1393, 设备: 1093 },
          { 日期: "2:00", 收益: 3530, 设备: 3230 },
          { 日期: "4:00", 收益: 2923, 设备: 2623 },
          { 日期: "6:00", 收益: 1723, 设备: 1423 },
          { 日期: "8:00", 收益: 3792, 设备: 3492 },
          { 日期: "10:00", 收益: 4593, 设备: 4293 },
          { 日期: "12:00", 收益: 4593, 设备: 4293 },
          { 日期: "14:00", 收益: 4593, 设备: 4293 },
          { 日期: "16:00", 收益: 4593, 设备: 4293 },
          { 日期: "18:00", 收益: 4593, 设备: 4293 },
          { 日期: "20:00", 收益: 4593, 设备: 4293 },
          { 日期: "22:00", 收益: 4593, 设备: 4293 },
          { 日期: "24:00", 收益: 4593, 设备: 4293 }
        ]
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  components: {
    squareIndex
  }
};
</script>

<style scoped lang="less">
.echart-line{
    margin-top: 60px;
}
</style>
